import React from 'react';
import ReactDOM from 'react-dom';
import { Modal } from 'antd';


type defaultPropsType = {
    title?: string,
    onOk?: () => void,
    onCancel?: () => void,
    content?: React.ReactNode
}

export const useModal: ({title, onOk, onCancel, content}: defaultPropsType) => { close: () => void; open: () => void }
    = ({title, onOk, onCancel, content}) => {
    const div = React.useMemo(() => document.createElement('div'), []);
    const open = () => {
        ReactDOM.render(
            <Modal title={title}
                   visible={true}
                   style={{top: '45px'}}
                   onOk={() => {
                       close();
                       onOk?.();
                   }}
                   onCancel={() => {
                       close();
                       onCancel?.();
                   }}>
                {content}
            </Modal>,
            div);
    };

    const close = () => {
        ReactDOM.unmountComponentAtNode(div);
    };

    return {open, close};
};

